<template>
	<div>
		<div class="indexBannerBox">
			<indexBanner></indexBanner>
		</div>
		<!-- 顶部 -->
		<div class="menu">
			<div class="wrap">
				<dl class="menuList">
					<dd v-for="item in menuList">
						<span><a href="">{{item.name}}</a></span>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
import indexBanner from './indexBanner.vue'
export default {
	name: 'top',
	props: {
		msg: String
	},
	components: {
		indexBanner
	},
	data(){
		return {
			menuList:[],
		}  
	},
	computed: {
	},
	mounted() {
	},
	created() {
		var _this=this
		axios.post('http://vueapitest.aykj.so/api/xcx/newsClass/topNavNewsClassList?subsiteId=1').then(function(res){
			_this.menuList = res.data.topNavNewsClassList
		}).catch(function (error) {
			console.log(error);
		});
	}
}
</script>
<style scoped>
	.indexBannerBox{ position: relative; z-index: -1;height: 350px;}
	
	.menuList{height: 65px;background: #cc141e; border-radius: 5px;}
	.menuList dd{float: left; display: inline; overflow: hidden; width: 10%;}
	.menuList dd span a{display: block; overflow: hidden; font-size: 16px; color:#fff; text-align: center; line-height: 65px; position: relative; transition: 0.3s;}
	.menuList dd span a:after{display: block; content: ''; width: 2px; height: 30px; overflow: hidden; background: #da1f29; width: 2px; position: absolute; left: 0px; top:50%; margin-top: -15px;}
	.menuList dd:hover span a{background: #b1111a;}
	.menuList dd:hover em{display: none;}
	.menuList dd.hover span a{background: #b1111a;}
	.menuList dd.hover em{display: none;}
</style>
